import dynamic from 'next/dynamic';
import { ReactNode, useEffect, useState } from 'react';
import Link from 'next/link';
import an58 from '@mmstudio/an000058';
import api from '../atoms/api';
import { Result as R1 } from './api/admin/menu/my.api';
import Header from './header';

/**
 * 父级
 */
const Menu = dynamic(
	import('antd/lib/menu'),
	{ ssr: false }
);
/**
 * 内容
 */
const MenuItem = dynamic(
	import('antd/lib/menu/MenuItem'),
	{ ssr: false }
);
/**
 * 子级
 */
const SubMenu = dynamic(
	import('antd/lib/menu/SubMenu'),
	{ ssr: false }
);

/**
 * 菜单
 */
export interface IMenu {
	icon?: string;
	label: string;
	key: string;
	url?: string;
	pkey?: string;
	children?: IMenu[];
}

export default function Framelayout({
	children,
	pathname
}: {
	children: ReactNode;
	pathname: string;
}) {
	//菜单
	const [menus, setMenus] = useState([] as IMenu[]);
	useEffect(() => {
		void (async () => {
			//获取当前登录用户菜单数据
			const ret = await an58<R1>(api['/api/admin/menu/my'], 'get');
			setMenus(ret.filter((it) => {
				return !it.pid;
			}).map((it) => {
				return GetTree(it, ret);
			}));
		})();
	}, []);
	//页面
	const name = pathname.replace(/\[.*\]/, '');
	const [o, selectedKeys] = menus.reduce(([o, s], c) => {
		getkeys(name, c, o, s);
		return [o, s];
	}, [new Set<string>(), []] as [Set<string>, string[]]);
	const openKeys = Array.from(o);
	return <>
		<div className='layout'>
			{/* top Header*/}
			<Header />
			<div className='content'>
				{/* left */}
				<div className='left'>
					{/* menu */}
					<Menu
						multiple={false}
						theme="light"
						defaultSelectedKeys={selectedKeys}
						defaultOpenKeys={openKeys}
						mode="inline"
					>
						{menus.map((menu) => {
							return generatemenu(menu);
						})}
					</Menu>
					<div className='imgv'>
						<img className='img' src='/images/shensuo.png' />
					</div>
				</div>
				{/* right */}
				<div className='right'>
					{/* top */}
					<div className='path'>
						{/* <span className='pathp'>首页/基础信息管理/专业管理</span>
						<span className='paths'>专业管理--专业列表</span> */}
					</div>
					{/* bottom */}
					<div className='page'>
						{children}
					</div>
				</div>
			</div>
			<style jsx>{`
.layout{
display: flex;
width: 100%;
flex-direction: column;
background-color: #E5E5E5;
}
.content{
display: flex;
flex-direction: row;
}
.left{
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #FFFFFF;
width: 256px;
height: 94vh;
}
.imgv{
Height:40px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0rem .0625rem 0rem 0rem #F0F0F0 inset;
}
.img{
width: 15px;
 height: 13px;
margin-left: 16px;
}
.right{
display: flex;
flex-direction: column;
width: 100%;
padding:0 1.5rem 1.5rem 1.5rem;
}
.path{
display: flex;
flex-direction: column;
background-color: #FFFFFF;
width: 100%;
height: 6.25rem;

}
.page{
display: flex;
flex-direction: column;
width: 100%;
}
.pathp{
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.45);
margin:1rem 0 1rem 1.5rem;
}
.paths{
font-size: 1.25rem;
color: rgba(0, 0, 0, 0.85);
margin-left:1.5rem;
}
			`}</style>
		</div >
	</>;
}

/**
 * 构造菜单-树结构
 * @param data 
 * @param all 
 * @returns 
 */
function GetTree(data: ITbfdmenu, all: ITbfdmenu[]): IMenu {
	const children = all.filter((it) => {
		return it.pid === data.menuid;
	}).map((it) => {
		return GetTree(it, all);
	});
	return {
		key: data.menuid,
		label: data.name,
		icon: data.icon,
		url: data.url,
		children
	};
}

/**
 * 
 * @param pathname 
 * @param menu 
 * @param openkeys 
 * @param selectkeys 
 */
function getkeys(pathname: string, menu: IMenu, openkeys: Set<string>, selectkeys: string[]) {
	if (menu.children) {
		menu.children.forEach((m) => {
			getkeys(pathname, m, openkeys, selectkeys);
		});
	}
	if (pathname.startsWith(menu.url)) {
		if (menu.pkey) {
			openkeys.add(menu.pkey);
		}
		selectkeys.push(menu.key);
	}
}


/**
 * 根据数据创建菜单，但由于antd组件的bug不能使用函数组件
 */
function generatemenu(menu: IMenu) {
	if (!menu.url || (menu.children && menu.children.length > 0)) {
		return <SubMenu key={menu.key} icon={<Icon src={menu.icon} />} title={<span className='menulabel'>{menu.label}</span>}>
			{menu.children.map((m) => {
				return generatemenu(m);
			})}
			<style jsx>{`
.menulabel{
font-size: 1rem;
}
`}</style>
		</SubMenu>;
	}
	return <MenuItem key={menu.key}
		icon={menu.pkey ? <SubMenuIcon src={menu.icon} /> : <Icon src={menu.icon} />}>
		<Link href={menu.url}>
			<a>
				<span className={menu.pkey ? 'menulabel2' : 'menulabel'}>{menu.label}
				</span>
			</a>
		</Link>
		<style jsx>{`
.menulabel{
font-size: 16px;
}
.menulabel2{
font-size: 14.4px;
}
`}</style>
	</MenuItem>;
}

function Icon({ src }: { src: string }) {
	if (!src) {
		return <></>;
	}
	return <>
		<img className='icon' src={src} />
		<style jsx>{`
.icon{
	width:  13px;
	height: 13px;
	margin-right: 8px;
}
`}</style>
	</>;
}

function SubMenuIcon({ src }: { src: string }) {
	if (!src) {
		return <></>;
	}
	return <>
		<img className='icon' src={src} />
		<style jsx>{`
.icon{
width: 17.6px;
	height: 17.6px;
	margin-right: 8px;
`}</style>
	</>;
}
